<template>
  <div>
    <div class="block">
      <div class="block_title">管理端域名配置</div>
      <div class="block_tip">提示：请将域名解析到oem.1688iot.vip；并在解析完十分钟后点击确定更新域名，同一域名每天只能更新3次。</div>
      <div class="block_form">
        <el-input v-model="value1" style="width: 300px;"></el-input>
        <el-button type="primary" @click="next('CONTROL')" style="margin: 0 20px">确定</el-button>
      </div>
    </div>
    <div class="block">
      <div class="block_title">C端域名配置</div>
      <div class="block_tip">提示：请将域名解析到cus.1688iot.vip；并在解析完十分钟后点击确定更新域名，同一域名每天只能更新3次。</div>
      <div class="block_form">
        <el-input v-model="value2" style="width: 300px;"></el-input>
        <el-button type="primary" @click="next('CUSTOMER')" style="margin: 0 20px">确定</el-button>
      </div>
    </div>
<!--    <div class="block">-->
<!--      <div class="block_title">APP域名接口域名</div>-->
<!--      <div class="block_tip">提示：请将域名解析到app.1688iot.vip</div>-->
<!--      <div class="block_form">-->
<!--        <el-input v-model="value3" style="width: 300px;"></el-input>-->
<!--        <el-button type="primary" @click="" style="margin: 0 20px">确定</el-button>-->
<!--      </div>-->
<!--    </div>-->
    <div class="block">
      <div class="block_title">实名域名绑定</div>
      <div class="block_tip">提示：请将域名解析到n.1688iot.vip；并在解析完十分钟后点击确定更新域名，同一域名每天只能更新3次。</div>
      <div class="block_form">
        <el-input v-model="value4" style="width: 300px;"></el-input>
        <el-button type="primary" @click="next('REAL_NAME_URL')" style="margin: 0 20px">确定</el-button>
      </div>
    </div>

  </div>
</template>
<script>
import {getDomainHttp,updateDomainHttp} from '../../api/getData'
export default {
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: '',
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData(){
      let res = await getDomainHttp({dictType: "CONTROL"})
      this.value1 = res.data?res.data.hostname:'';
      let resp = await getDomainHttp({dictType: "CUSTOMER"})
      this.value2 = resp.data?resp.data.hostname:'';
      let response = await getDomainHttp({dictType: "REAL_NAME_URL"})
      this.value4 = response.data?response.data.hostname:'';
    },
    async next(type){
      this.type = type;
      let value = '';
      this.text1 = '';
      this.text2 = '';
      if(type=='CONTROL'){
        value = this.value1;
      }
      if(type=='CUSTOMER'){
        value = this.value2;
      }
      if(type=='REAL_NAME_URL'){
        value = this.value4;
      }
      let res = await updateDomainHttp({
        dictType: type,
        hostname: value
      })
      if(res.code==10000){
        this.$message({
          type: 'success',
          message:'数据提交成功',
        })
      }
      else{
        this.$message.error('数据提交失败')
      }

    }
  }
}
</script>
<style scoped>
.block{
  width: auto;
  max-width: 700px;
  height: auto;
  position: relative;
  margin: 20px 20px;
  padding: 20px;
  border: 1px solid var(--lightBg);
  border-radius: 5px;
  background-repeat: no-repeat;
  background-size: cover;
  backdrop-filter: opacity(0.3);
}
.block_title{
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  font-size: 18px;
  color: #555;
  text-indent: 20px;
}
.block_tip{
  width: 100%;
  height: auto;
  line-height: 20px;
  font-size: 14px;
  color: #999;
  text-indent: 10%;
  margin-top: 20px;
}
.block_form{
  width: 90%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10%;
}
.row_form{
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
